import React, {useMemo} from 'react';
import {Carousel, Image} from "antd";
import {CarouselProps} from "./dev.tsx";

const CarouselProd = ({styles,children,autoplay}:CarouselProps) => {
    console.log({height: "100%",...styles})
    const imgList = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return <div style={{...styles}}>
                <Image
                    data-component-id={item.props?.id}
                    width={item.props?.styles?.width || "100%"}
                    height={item.props?.styles?.height || styles?.height || 100}
                    preview={false}
                    src={item.props.url}
                    style={{objectFit:"cover"}}
                />
            </div>
        })
    }, [children])
    return (
        <>
            <Carousel arrows  infinite={false} style={{minHeight:"100px",...styles}} autoplay={autoplay}>
                {imgList}
            </Carousel>
        </>
    );
};

export default CarouselProd;